<template>
	<view class="uni-product-list">
		<view v-if="productList.length >= 0" class="uni-product" v-for="(product,index) in productList" :key="index" @click="goDetail(product.id)">
			<view class="image-view">
				<image class="uni-product-image" :src="product.goodsImgUrl"></image>
			</view>
			<view class="uni-product-title">{{product.name}}</view>
			<view class="uni-product-price">
				<text class="uni-product-price-original">￥<text style="font-size: 36upx;">{{product.price}}</text></text>
				<text class="uni-product-price-favour">￥{{product.mktprice}}</text>
				<!-- <text class="uni-product-tip">{{product.tip}}</text> -->
			</view>
		</view>
		<view v-else>未搜索到相关商品</view>
	</view>
</template>

<script>
	var _self, page = 1,timer = null;
	import {
		get,
		post,
		showToast
	} from '../../js/common';
	export default {
		data() {
			return {
				key: '',
				productList: [],
				loadingText: '加载中...'
			}
		},
		onLoad(option) {
			this.key = option.key
			_self = this;
			this.getGoods()
		},
		onPullDownRefresh() {
			this.getGoods()
		},
		onReachBottom: function() {
			if (timer != null) {
				clearTimeout(timer);
			}
			timer = setTimeout(function() {
				_self.getmorenews();
			}, 1000);
		},
		methods: {
			getGoods() {
				const params = {
					goodsName: this.key,
					limit:20,
					currentPage:page
				}
				post('mobileapi/anon/goods/searchByGoodsName', params).then(res => {
					this.productList = res.page.list
					page++;
					uni.hideNavigationBarLoading();
					uni.stopPullDownRefresh();
					_self.loadingText = '加载更多';
				})
			},
			getmorenews: function() {
				if (_self.loadingText != '' && _self.loadingText != '加载更多') {
					return false;
				}
				_self.loadingText = '加载中...';
				uni.showNavigationBarLoading();
				const params = {
					goodsName: this.key,
					limit:20,
					page:page
				}
				post('mobileapi/anon/goods/searchGoods', params).then(res => {
					_self.loadingText = '';
					if (res.page == null) {
						uni.hideNavigationBarLoading();
						_self.loadingText = '已加载全部';
						uni.showToast({
							title: '已加载全部'
						})
						return false;
					}
					page++;
					for (let i = 0; i < res.page.list.length; i++) {
						_self.productList.push(res.page.list[i])
					}
					_self.loadingText = '加载更多';
					uni.hideNavigationBarLoading();
				})
			},
			goDetail(id) {
				uni.navigateTo({
					url: '/pages/commodity/index?id=' + id
				})
			}
		},
	}
</script>

<style>
	/* product */
	page {
		background: #F8F8F8;
	}

	view {
		font-size: 28upx;
	}

	.uni-product-list {
		display: flex;
		width: 100%;
		flex-wrap: wrap;
		flex-direction: row;
		padding: 0 20upx;
	}

	.uni-product {
		width: 330upx;
		margin: 12upx;
		display: flex;
		flex-direction: column;
		border-radius: 10upx;
		background: #FFFFFF;
	}

	.image-view {
		height: 330upx;
		width: 330upx;
	}

	.uni-product-image {
		height: 330upx;
		width: 330upx;
	}

	.uni-product-title {
		width: 320upx;
		height: 80upx;
		margin: 10upx;
		word-break: break-all;
		display: -webkit-box;
		overflow: hidden;
		line-height: 1.5;
		text-overflow: ellipsis;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.uni-product-price {
		margin-top: 10upx;
		font-size: 28upx;
		line-height: 1.5;
		position: relative;
	}

	.uni-product-price-original {
		color: #D7000F;
		margin-left: 10upx;
	}

	.uni-product-price-favour {
		color: #999;
		text-decoration: line-through;
		margin-left: 10upx;
	}

	.uni-product-tip {
		position: absolute;
		right: 10upx;
		background-color: #ff3333;
		color: #ffffff;
		padding: 0 10upx;
		border-radius: 5upx;
	}
</style>
